<template>
	<!-- 充值余额 -->
	<view class="px-[48rpx]">
		<view class="flex justify-center items-center">
			<image class="w-[258rpx] h-[258rpx] mt-[30rpx]" src="@/static/images/img/czbg.png" mode="aspectFit"></image>
		</view>
		<view class="mt-[36rpx] font-medium text-[32rpx] text-[#000000] leading-[48rpx] text-left font-[PingFangSC]">
			充值金额
		</view>
		<view class="mt-[30rpx]">
			<input type="number" v-model="amount" placeholder="请输入充值金额"
				class="w-[654rpx] h-[100rpx] bg-[#FFEFB8] rounded-[8rpx] px-[20rpx] text-center text-[36rpx] font-bold"
				@input="handleInput" />
		</view>
		<view class="mt-[32rpx] font-medium text-[32rpx] text-black leading-[48rpx] text-left font-[PingFangSC]">
			充值说明
		</view>
		<view class="mt-[36rpx]">
			<view class=" font-normal text-[24rpx] text-[#FFB751] leading-[48rpx] text-left font-[PingFangSC]">
				特别提示:余额一经充值，无法退款，请您知悉</view>
			<view class="text-[24rpx] mt-[30rpx] text-[#666666]">
				余额可用于车易车多数服务消费使用。现已支持柠檬查、4S记录、综合查询、调表分析、维修记录、电池分析、电子合同、58同步卡购买及增加车位;后续将增加更多类型的使用。
				值余额即代表您同意上述说明。
				<view class="mt-[30rpx]">若有任何疑问，欢迎致电在线客服400-800-8677。</view>
			</view>
		</view>
		
		<!-- 阅读协议勾选 -->
		<view class="flex items-center justify-center mt-[80rpx]">
			<view class="flex items-center" @click="toggleAgreement">
				<view class="w-[40rpx] h-[40rpx] flex items-center justify-center bg-[#333] rounded-full mr-[10rpx]" v-if="isAgreed">
					<view class="text-[#FFEFB8] text-[24rpx]">✓</view>
				</view>
				<view class="w-[40rpx] h-[40rpx] border border-[#999] rounded-full mr-[10rpx]" v-else></view>
				<text class="text-[24rpx] text-[#333]">我已阅读并同意上述充值说明</text>
			</view>
		</view>
		
		<!-- 微信支付按钮 -->
		<view class="mt-[40rpx] mb-[40rpx]">
			<button 
				class="w-full h-[90rpx] text-[#FFEFB8] rounded-[16rpx] flex items-center justify-center font-[500] text-[28rpx]"
				:disabled="!isAgreed"
				:style="{ 
					opacity: isAgreed ? 1 : 0.5,
					background: 'linear-gradient( 98deg, #454545 0%, #000000 100%)'
				}"
				@click="handlePay"
			>
				微信支付
			</button>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';
import { createOrder } from '@/api/bwsc.js';
import useUserStore from '@/store/modules/user';
const userStore = useUserStore();
const amount = ref('3000');
const isAgreed = ref(false);

const handleInput = (e) => {
	console.log('充值金额:', amount.value);
};

const toggleAgreement = () => {
	isAgreed.value = !isAgreed.value;
};

const handlePay = () => {
	if (!isAgreed.value) {
		uni.showToast({
			title: '请先阅读并同意充值说明',
			icon: 'none'
		});
		return;
	}
	
	if (!amount.value || Number(amount.value) <= 0) {
		uni.showToast({
			title: '请输入有效的充值金额',
			icon: 'none'
		});
		return;
	}
	
	// 创建订单数据
	const orderData = {
		amount: amount.value,
        userId: userStore.userId
	};
	
	// 调用创建订单接口
	createOrder(orderData).then(res => {
		if (res.code == 200) {
			// 订单创建成功，跳转到支付页面
			uni.navigateTo({
				url: `/pages_qc/pay/pay?orderNo=${res.data.outTradeNo}&amount=${amount.value}`
			});
		} else {
			uni.showToast({
				title: res?.msg || '创建订单失败',
				icon: 'none'
			});
		}
	}).catch(err => {
		console.error('创建订单失败', err);
		uni.showToast({
			title: '创建订单失败，请稍后重试',
			icon: 'none'
		});
	});
};
</script>

<style lang="scss" scoped></style>